<template>
    <h2>跨列</h2>
    <div class="容器 tw:grid-cols-3">
        <div class="元素">01</div>
        <div class="元素">02</div>
        <div class="元素">03</div>
        <div class="元素 tw:col-span-2">04</div>
        <div class="元素">05</div>
        <div class="元素">06</div>
        <div class="元素 tw:col-span-2">07</div>
    </div>
    <h2>起止列</h2>
    <div class="容器 tw:grid-cols-6">
        <div class="元素 tw:col-span-4 tw:col-start-2">01</div>
        <div class="元素 tw:col-start-1 tw:col-end-3">02</div>
        <div class="元素 tw:col-span-2 tw:col-end-7">03</div>
        <div class="元素 tw:col-start-1 tw:col-end-7">04</div>
    </div>
</template>

<style scoped lang="">
    @reference '@/tailwind.css';
    .容器 {
        @apply tw:grid tw:gap-2
    }
    .元素 {
        @apply tw:bg-blue-300 tw:rounded-md tw:h-8 tw:flex tw:justify-center tw:items-center
    }
</style>
